<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>

    <title>Complex Plot Layouts</title>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="canvasxpress, canvas, html5, graph, chart, plot, javascript, javascript library, genomic, scientific, android, animation, bar graph, line graph, dotplot, boxplot, heatmap, newick, scatter, 3d, pie, correlation, venn, network, market, candlestick, genome browser, isaac neuhaus"/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="Rating" content="general" />
    <meta name="googlebot" content="index,follow" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="Isaac Neuhaus" />
    <meta name="google-site-verification" content="UmQp3wIY7r9cDwr5LRdUDeDkpxAxg0Lv5tUc3tW9-90" />

    <link rel="stylesheet" href="./css/global.css" type="text/css"/>
    <style type="text/css">
      table.example {margin: 10px; border-collapse: collapse;}
      td.example {vertical-align: top;}
      div br {clear: both;}
      div.code, div.json, div.pre {font-size: medium; clear: both;}
      div.desc {font-size: small;}
      div.h3 {font-size: 150%}
      div.h4 {font-size: 120%}
      table.config {font-size: small; border-collapse: collapse; margin: 10px; width: 800px;}
      td.first-col {border: 1px solid #000000; padding: 4px; width: 35%; vertical-align: top;}
      td.sec-col {border: 1px solid #1D222B; padding: 4px; width: 65%; vertical-align: top;}
      tr.private {background-color: #EEEEEE;}
      tr.public {background-color: #FFFFFF;}
      span.light {font-size: small; color: #777777; font-style: italic;}
      caption {background-color:  #DDDDDD; border-top: 1px solid #1D222B;  border-right: 1px solid #1D222B;  border-left: 1px solid #1D222B; color: #FFFFFF: font-size: 150%; padding: 2px 6px; text-align: left;}
      div.canvas {margin: 10px;}
    </style>

    <!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
    <!--[if IE]><script type="text/javascript" src="./js/extext.js"></script><![endif]-->
    <script type="text/javascript" src="./js/canvasXpress.min.js"></script>

    <script>

      var showDemo = function () {
        new CanvasXpress('canvas',
                         {z: {Species: ['setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica']},
                          y: {smps: ['Sepal.Length', 'Sepal.Width', 'Petal.Length', 'Petal.Width'],
                              data: [[5.1,3.5,1.4,0.2],
                                     [4.9,3.0,1.4,0.2],
                                     [4.7,3.2,1.3,0.2],
                                     [4.6,3.1,1.5,0.2],
                                     [5.0,3.6,1.4,0.2],
                                     [5.4,3.9,1.7,0.4],
                                     [4.6,3.4,1.4,0.3],
                                     [5.0,3.4,1.5,0.2],
                                     [4.4,2.9,1.4,0.2],
                                     [4.9,3.1,1.5,0.1],
                                     [5.4,3.7,1.5,0.2],
                                     [4.8,3.4,1.6,0.2],
                                     [4.8,3.0,1.4,0.1],
                                     [4.3,3.0,1.1,0.1],
                                     [5.8,4.0,1.2,0.2],
                                     [5.7,4.4,1.5,0.4],
                                     [5.4,3.9,1.3,0.4],
                                     [5.1,3.5,1.4,0.3],
                                     [5.7,3.8,1.7,0.3],
                                     [5.1,3.8,1.5,0.3],
                                     [5.4,3.4,1.7,0.2],
                                     [5.1,3.7,1.5,0.4],
                                     [4.6,3.6,1.0,0.2],
                                     [5.1,3.3,1.7,0.5],
                                     [4.8,3.4,1.9,0.2],
                                     [5.0,3.0,1.6,0.2],
                                     [5.0,3.4,1.6,0.4],
                                     [5.2,3.5,1.5,0.2],
                                     [5.2,3.4,1.4,0.2],
                                     [4.7,3.2,1.6,0.2],
                                     [4.8,3.1,1.6,0.2],
                                     [5.4,3.4,1.5,0.4],
                                     [5.2,4.1,1.5,0.1],
                                     [5.5,4.2,1.4,0.2],
                                     [4.9,3.1,1.5,0.2],
                                     [5.0,3.2,1.2,0.2],
                                     [5.5,3.5,1.3,0.2],
                                     [4.9,3.6,1.4,0.1],
                                     [4.4,3.0,1.3,0.2],
                                     [5.1,3.4,1.5,0.2],
                                     [5.0,3.5,1.3,0.3],
                                     [4.5,2.3,1.3,0.3],
                                     [4.4,3.2,1.3,0.2],
                                     [5.0,3.5,1.6,0.6],
                                     [5.1,3.8,1.9,0.4],
                                     [4.8,3.0,1.4,0.3],
                                     [5.1,3.8,1.6,0.2],
                                     [4.6,3.2,1.4,0.2],
                                     [5.3,3.7,1.5,0.2],
                                     [5.0,3.3,1.4,0.2],
                                     [7.0,3.2,4.7,1.4],
                                     [6.4,3.2,4.5,1.5],
                                     [6.9,3.1,4.9,1.5],
                                     [5.5,2.3,4.0,1.3],
                                     [6.5,2.8,4.6,1.5],
                                     [5.7,2.8,4.5,1.3],
                                     [6.3,3.3,4.7,1.6],
                                     [4.9,2.4,3.3,1.0],
                                     [6.6,2.9,4.6,1.3],
                                     [5.2,2.7,3.9,1.4],
                                     [5.0,2.0,3.5,1.0],
                                     [5.9,3.0,4.2,1.5],
                                     [6.0,2.2,4.0,1.0],
                                     [6.1,2.9,4.7,1.4],
                                     [5.6,2.9,3.6,1.3],
                                     [6.7,3.1,4.4,1.4],
                                     [5.6,3.0,4.5,1.5],
                                     [5.8,2.7,4.1,1.0],
                                     [6.2,2.2,4.5,1.5],
                                     [5.6,2.5,3.9,1.1],
                                     [5.9,3.2,4.8,1.8],
                                     [6.1,2.8,4.0,1.3],
                                     [6.3,2.5,4.9,1.5],
                                     [6.1,2.8,4.7,1.2],
                                     [6.4,2.9,4.3,1.3],
                                     [6.6,3.0,4.4,1.4],
                                     [6.8,2.8,4.8,1.4],
                                     [6.7,3.0,5.0,1.7],
                                     [6.0,2.9,4.5,1.5],
                                     [5.7,2.6,3.5,1.0],
                                     [5.5,2.4,3.8,1.1],
                                     [5.5,2.4,3.7,1.0],
                                     [5.8,2.7,3.9,1.2],
                                     [6.0,2.7,5.1,1.6],
                                     [5.4,3.0,4.5,1.5],
                                     [6.0,3.4,4.5,1.6],
                                     [6.7,3.1,4.7,1.5],
                                     [6.3,2.3,4.4,1.3],
                                     [5.6,3.0,4.1,1.3],
                                     [5.5,2.5,4.0,1.3],
                                     [5.5,2.6,4.4,1.2],
                                     [6.1,3.0,4.6,1.4],
                                     [5.8,2.6,4.0,1.2],
                                     [5.0,2.3,3.3,1.0],
                                     [5.6,2.7,4.2,1.3],
                                     [5.7,3.0,4.2,1.2],
                                     [5.7,2.9,4.2,1.3],
                                     [6.2,2.9,4.3,1.3],
                                     [5.1,2.5,3.0,1.1],
                                     [5.7,2.8,4.1,1.3],
                                     [6.3,3.3,6.0,2.5],
                                     [5.8,2.7,5.1,1.9],
                                     [7.1,3.0,5.9,2.1],
                                     [6.3,2.9,5.6,1.8],
                                     [6.5,3.0,5.8,2.2],
                                     [7.6,3.0,6.6,2.1],
                                     [4.9,2.5,4.5,1.7],
                                     [7.3,2.9,6.3,1.8],
                                     [6.7,2.5,5.8,1.8],
                                     [7.2,3.6,6.1,2.5],
                                     [6.5,3.2,5.1,2.0],
                                     [6.4,2.7,5.3,1.9],
                                     [6.8,3.0,5.5,2.1],
                                     [5.7,2.5,5.0,2.0],
                                     [5.8,2.8,5.1,2.4],
                                     [6.4,3.2,5.3,2.3],
                                     [6.5,3.0,5.5,1.8],
                                     [7.7,3.8,6.7,2.2],
                                     [7.7,2.6,6.9,2.3],
                                     [6.0,2.2,5.0,1.5],
                                     [6.9,3.2,5.7,2.3],
                                     [5.6,2.8,4.9,2.0],
                                     [7.7,2.8,6.7,2.0],
                                     [6.3,2.7,4.9,1.8],
                                     [6.7,3.3,5.7,2.1],
                                     [7.2,3.2,6.0,1.8],
                                     [6.2,2.8,4.8,1.8],
                                     [6.1,3.0,4.9,1.8],
                                     [6.4,2.8,5.6,2.1],
                                     [7.2,3.0,5.8,1.6],
                                     [7.4,2.8,6.1,1.9],
                                     [7.9,3.8,6.4,2.0],
                                     [6.4,2.8,5.6,2.2],
                                     [6.3,2.8,5.1,1.5],
                                     [6.1,2.6,5.6,1.4],
                                     [7.7,3.0,6.1,2.3],
                                     [6.3,3.4,5.6,2.4],
                                     [6.4,3.1,5.5,1.8],
                                     [6.0,3.0,4.8,1.8],
                                     [6.9,3.1,5.4,2.1],
                                     [6.7,3.1,5.6,2.4],
                                     [6.9,3.1,5.1,2.3],
                                     [5.8,2.7,5.1,1.9],
                                     [6.8,3.2,5.9,2.3],
                                     [6.7,3.3,5.7,2.5],
                                     [6.7,3.0,5.2,2.3],
                                     [6.3,2.5,5.0,1.9],
                                     [6.5,3.0,5.2,2.0],
                                     [6.2,3.4,5.4,2.3],
                                     [5.9,3.0,5.1,1.8]]}},
                         {graphType: 'Scatter2D',
                          colorBy: 'Species',
                          layoutAdjust: true,
                          allVsAll: true});
        var cx = new CanvasXpress('canvas1',
                                 {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver']},
                                  y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                                      smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                                      desc:     ['Intensity'],
                                      data:    [[10, 12, 3, 4, 100, 73, 42, 64],
                                                [12, 4, 60, 5, 24, 14, 32, 13],
                                                [7, 12, 20, 13, 49, 52, 42, 92],
                                                [21, 10, 30, 8, 65, 166, 47, 58],
                                                [15, 14, 100, 5, 34, 30, 82, 51],
                                                [100, 82, 73, 4, 3, 4, 5, 2]]},
                                  z: {Category: ['A', 'B', 'C', 'B', 'C', 'A']}},
                                 {graphType: 'Bar'});
        cx.segregateSamples('Tissue');
        cx.segregateVariables('Category');
        cx.subGraphType1 = 'Dotplot';
        cx.subGraphType3 = 'Line';
        cx.subGraphType5 = 'Stacked';
        cx.draw();
      }

      var jumpTo = function(url) {
        parent.location=url
      }

      var showSourceCode = function(id) {
        var c = document.getElementById(id)
        if (c) {
          var d = c.style.display
          if (d == 'none') {
            c.style.display = 'block';
          } else {
            c.style.display = 'none';
          }
        }
      }

      var showCode = function(cb, t) {
        var cx = CanvasXpress.references
          for (var i = 0; i < CanvasXpress.references.length; i++) {
            if (CanvasXpress.references[i].target == t) {
              var c = CanvasXpress.references[i];
              if(cb.checked) {
                c.showCode = true;
                c.draw()
              } else {
                c.showCode = false;
                c.hideCodeDiv()
              }
            }
          }
      }

      var showData = function(cb, t) {
        var cx = CanvasXpress.references
          for (var i = 0; i < CanvasXpress.references.length; i++) {
            if (CanvasXpress.references[i].target == t) {
              var c = CanvasXpress.references[i];
              if(cb.checked) {
                c.showDataTable = true;
              } else {
                c.showDataTable = false;
              }
              c.draw()
            }
          }
      }

    </script>

  </head>

  <body onload="showDemo();">

    <div class="page">

      <div class="header">

        <a href="./" class="logo">canvasXpress | Javascript Canvas Graphing Library</a>

        <div class="share">
          <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c58a3ba2ff9a164">
            <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
          </a>
          <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c58a3ba2ff9a164"></script>
        </div>

        <div class="donate">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="EVP6CWVNJN7SY">
            <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
          </form>
        </div>

        <ul class="nav">
          <li ><a href="./">Home</a></li>
          <li ><a href="./about.html">About</a></li>
          <li ><a href="./documentation.html">Documentation</a></li>
          <li class="current"><a href="./bar.html">Examples</a></li>
          <li ><a href="./download.html">Download</a></li>
          <li ><a href="./contact.html">Contact</a></li>
        </ul>

      </div>

      <div class="wrap">

        <div class="content">

          <div id="examples">

            <div class="chooseGraph">
              <select onchange="jumpTo(this.value)">
                <option selected="selected">Select a Graph...</option>
                <option value="./bar.html">Bar graphs</option>
                <option value="./line.html">Line graphs</option>
                <option value="./barline.html">Bar-line combination</option>
                <option value="./boxplot.html">Boxplots</option>
                <option value="./dotplot.html">Dotplots</option>
                <option value="./area.html">Area graphs</option>
                <option value="./stacked.html">Stacked graphs</option>
                <option value="./correlation.html">Correlation plots</option>
                <option value="./venn.html">Venn diagrams</option>
                <option value="./heatmap.html">Heatmaps</option>
                <option value="./scatter2d.html">2D-scatter plots</option>
                <option value="./scatter3d.html">3D-scatter plots</option>
                <option value="./pie.html">Pie charts</option>
                <option value="./candlestick.html">Stock Market charts</option>
                <option value="./network.html">Networks (or pathways)</option>
                <option value="./genome.html">Genome browser</option>
                <option value="./circular.html">Circular plots</option>
                <option value="./layout.html">Complex plot layouts</option>
                <option value="./extjs.html">Ext-JS Panel</option>
                <option value="./test.html">Test Page</option>
              </select>
            </div>
            <br>

          </div>

          <h1>Complex Plot Layouts</h1>

          <div class='desc'>
            <p>
            </p>
          </div>

            <div>
              <br /><br />
              <form>
                <div style="width: 613px;">
                  <input alt="Code included in the HTML page" title="Code included in the HTML page" type="checkbox" value="ch1-canvas" onclick="showSourceCode('code-canvas')"/>Show Source Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Code transformed after initialized CanvasXpress" title="Code transformed after initialized CanvasXpress" type="checkbox" value="ch2-canvas" onclick="showCode(this, 'canvas')"/>Show Transformed Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Show data in HTML table" title="Show data in HTML table" type="checkbox" value="ch3-canvas" onclick="showData(this, 'canvas')"/>Show Data
                </div>
              </form>
              <canvas id="canvas" width="613" height="500"></canvas>
            </div>
            <div class="code" id="code-canvas" style="display: none;">
              <pre>
                new CanvasXpress('canvas',
                                 {z: {Species: ['setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','setosa','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','versicolor','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica','virginica']},
                                  y: {smps: ['Sepal.Length', 'Sepal.Width', 'Petal.Length', 'Petal.Width'],
                                      data: [[5.1,3.5,1.4,0.2],
                                             [4.9,3.0,1.4,0.2],
                                             [4.7,3.2,1.3,0.2],
                                             [4.6,3.1,1.5,0.2],
                                             [5.0,3.6,1.4,0.2],
                                             [5.4,3.9,1.7,0.4],
                                             [4.6,3.4,1.4,0.3],
                                             [5.0,3.4,1.5,0.2],
                                             [4.4,2.9,1.4,0.2],
                                             [4.9,3.1,1.5,0.1],
                                             [5.4,3.7,1.5,0.2],
                                             [4.8,3.4,1.6,0.2],
                                             [4.8,3.0,1.4,0.1],
                                             [4.3,3.0,1.1,0.1],
                                             [5.8,4.0,1.2,0.2],
                                             [5.7,4.4,1.5,0.4],
                                             [5.4,3.9,1.3,0.4],
                                             [5.1,3.5,1.4,0.3],
                                             [5.7,3.8,1.7,0.3],
                                             [5.1,3.8,1.5,0.3],
                                             [5.4,3.4,1.7,0.2],
                                             [5.1,3.7,1.5,0.4],
                                             [4.6,3.6,1.0,0.2],
                                             [5.1,3.3,1.7,0.5],
                                             [4.8,3.4,1.9,0.2],
                                             [5.0,3.0,1.6,0.2],
                                             [5.0,3.4,1.6,0.4],
                                             [5.2,3.5,1.5,0.2],
                                             [5.2,3.4,1.4,0.2],
                                             [4.7,3.2,1.6,0.2],
                                             [4.8,3.1,1.6,0.2],
                                             [5.4,3.4,1.5,0.4],
                                             [5.2,4.1,1.5,0.1],
                                             [5.5,4.2,1.4,0.2],
                                             [4.9,3.1,1.5,0.2],
                                             [5.0,3.2,1.2,0.2],
                                             [5.5,3.5,1.3,0.2],
                                             [4.9,3.6,1.4,0.1],
                                             [4.4,3.0,1.3,0.2],
                                             [5.1,3.4,1.5,0.2],
                                             [5.0,3.5,1.3,0.3],
                                             [4.5,2.3,1.3,0.3],
                                             [4.4,3.2,1.3,0.2],
                                             [5.0,3.5,1.6,0.6],
                                             [5.1,3.8,1.9,0.4],
                                             [4.8,3.0,1.4,0.3],
                                             [5.1,3.8,1.6,0.2],
                                             [4.6,3.2,1.4,0.2],
                                             [5.3,3.7,1.5,0.2],
                                             [5.0,3.3,1.4,0.2],
                                             [7.0,3.2,4.7,1.4],
                                             [6.4,3.2,4.5,1.5],
                                             [6.9,3.1,4.9,1.5],
                                             [5.5,2.3,4.0,1.3],
                                             [6.5,2.8,4.6,1.5],
                                             [5.7,2.8,4.5,1.3],
                                             [6.3,3.3,4.7,1.6],
                                             [4.9,2.4,3.3,1.0],
                                             [6.6,2.9,4.6,1.3],
                                             [5.2,2.7,3.9,1.4],
                                             [5.0,2.0,3.5,1.0],
                                             [5.9,3.0,4.2,1.5],
                                             [6.0,2.2,4.0,1.0],
                                             [6.1,2.9,4.7,1.4],
                                             [5.6,2.9,3.6,1.3],
                                             [6.7,3.1,4.4,1.4],
                                             [5.6,3.0,4.5,1.5],
                                             [5.8,2.7,4.1,1.0],
                                             [6.2,2.2,4.5,1.5],
                                             [5.6,2.5,3.9,1.1],
                                             [5.9,3.2,4.8,1.8],
                                             [6.1,2.8,4.0,1.3],
                                             [6.3,2.5,4.9,1.5],
                                             [6.1,2.8,4.7,1.2],
                                             [6.4,2.9,4.3,1.3],
                                             [6.6,3.0,4.4,1.4],
                                             [6.8,2.8,4.8,1.4],
                                             [6.7,3.0,5.0,1.7],
                                             [6.0,2.9,4.5,1.5],
                                             [5.7,2.6,3.5,1.0],
                                             [5.5,2.4,3.8,1.1],
                                             [5.5,2.4,3.7,1.0],
                                             [5.8,2.7,3.9,1.2],
                                             [6.0,2.7,5.1,1.6],
                                             [5.4,3.0,4.5,1.5],
                                             [6.0,3.4,4.5,1.6],
                                             [6.7,3.1,4.7,1.5],
                                             [6.3,2.3,4.4,1.3],
                                             [5.6,3.0,4.1,1.3],
                                             [5.5,2.5,4.0,1.3],
                                             [5.5,2.6,4.4,1.2],
                                             [6.1,3.0,4.6,1.4],
                                             [5.8,2.6,4.0,1.2],
                                             [5.0,2.3,3.3,1.0],
                                             [5.6,2.7,4.2,1.3],
                                             [5.7,3.0,4.2,1.2],
                                             [5.7,2.9,4.2,1.3],
                                             [6.2,2.9,4.3,1.3],
                                             [5.1,2.5,3.0,1.1],
                                             [5.7,2.8,4.1,1.3],
                                             [6.3,3.3,6.0,2.5],
                                             [5.8,2.7,5.1,1.9],
                                             [7.1,3.0,5.9,2.1],
                                             [6.3,2.9,5.6,1.8],
                                             [6.5,3.0,5.8,2.2],
                                             [7.6,3.0,6.6,2.1],
                                             [4.9,2.5,4.5,1.7],
                                             [7.3,2.9,6.3,1.8],
                                             [6.7,2.5,5.8,1.8],
                                             [7.2,3.6,6.1,2.5],
                                             [6.5,3.2,5.1,2.0],
                                             [6.4,2.7,5.3,1.9],
                                             [6.8,3.0,5.5,2.1],
                                             [5.7,2.5,5.0,2.0],
                                             [5.8,2.8,5.1,2.4],
                                             [6.4,3.2,5.3,2.3],
                                             [6.5,3.0,5.5,1.8],
                                             [7.7,3.8,6.7,2.2],
                                             [7.7,2.6,6.9,2.3],
                                             [6.0,2.2,5.0,1.5],
                                             [6.9,3.2,5.7,2.3],
                                             [5.6,2.8,4.9,2.0],
                                             [7.7,2.8,6.7,2.0],
                                             [6.3,2.7,4.9,1.8],
                                             [6.7,3.3,5.7,2.1],
                                             [7.2,3.2,6.0,1.8],
                                             [6.2,2.8,4.8,1.8],
                                             [6.1,3.0,4.9,1.8],
                                             [6.4,2.8,5.6,2.1],
                                             [7.2,3.0,5.8,1.6],
                                             [7.4,2.8,6.1,1.9],
                                             [7.9,3.8,6.4,2.0],
                                             [6.4,2.8,5.6,2.2],
                                             [6.3,2.8,5.1,1.5],
                                             [6.1,2.6,5.6,1.4],
                                             [7.7,3.0,6.1,2.3],
                                             [6.3,3.4,5.6,2.4],
                                             [6.4,3.1,5.5,1.8],
                                             [6.0,3.0,4.8,1.8],
                                             [6.9,3.1,5.4,2.1],
                                             [6.7,3.1,5.6,2.4],
                                             [6.9,3.1,5.1,2.3],
                                             [5.8,2.7,5.1,1.9],
                                             [6.8,3.2,5.9,2.3],
                                             [6.7,3.3,5.7,2.5],
                                             [6.7,3.0,5.2,2.3],
                                             [6.3,2.5,5.0,1.9],
                                             [6.5,3.0,5.2,2.0],
                                             [6.2,3.4,5.4,2.3],
                                             [5.9,3.0,5.1,1.8]]}},
                                 {graphType: 'Scatter2D',
                                  colorBy: 'Species',
                                  layoutAdjust: true,
                                  allVsAll: true});
              </pre>
            </div>

            <div>
              <br /><br />
              <form>
                <div style="width: 613px;">
                  <input alt="Code included in the HTML page" title="Code included in the HTML page" type="checkbox" value="ch1-canvas1" onclick="showSourceCode('code-canvas1')"/>Show Source Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Code transformed after initialized CanvasXpress" title="Code transformed after initialized CanvasXpress" type="checkbox" value="ch2-canvas1" onclick="showCode(this, 'canvas1')"/>Show Transformed Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Show data in HTML table" title="Show data in HTML table" type="checkbox" value="ch3-canvas1" onclick="showData(this, 'canvas1')"/>Show Data
                </div>
              </form>
              <canvas id="canvas1" width="613" height="500"></canvas>
            </div>
            <div class="code" id="code-canvas1" style="display: none;">
              <pre>
                var cx = new CanvasXpress('canvas1',
                                         {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver']},
                                          y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                                              smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                                              desc:     ['Intensity'],
                                              data:    [[10, 12, 3, 4, 100, 73, 42, 64],
                                                        [12, 4, 60, 5, 24, 14, 32, 13],
                                                        [7, 12, 20, 13, 49, 52, 42, 92],
                                                        [21, 10, 30, 8, 65, 166, 47, 58],
                                                        [15, 14, 100, 5, 34, 30, 82, 51],
                                                        [100, 82, 73, 4, 3, 4, 5, 2]]},
                                          z: {Category: ['A', 'B', 'C', 'B', 'C', 'A']}},
                                         {graphType: 'Bar'});
                cx.segregateSamples('Tissue');
                cx.segregateVariables('Category');
                cx.subGraphType1 = 'Dotplot';
                cx.subGraphType3 = 'Line';
                cx.subGraphType5 = 'Stacked';
                cx.draw();
              </pre>
            </div>

        </div>

        <br /><br /><br />
        <div class="clear">&nbsp;</div>

      </div>

      <div class="footer">

        Copyright &copy; 2010 canvasXpress.org |
        <a href="mailto:imnphd@gmail.com">Isaac&nbsp;Neuhaus</a> |
        Site Powered by <a href="http://www.artician.net">Artician</a>

      </div>

    </div>

    <div style="text-indent:-9999px;">
      &nbsp;
    </div>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-601687-37']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

  </body>

</html>
